<script setup lang="ts">
// import orderCard from "../components/order/orderCard.vue";
// import orderSellCard from "../components/order/orderSellCard.vue";
import { router, shortenString, toast } from "@/utils/tools";
import orderSellList from "../components/orderSellList/index.vue";
import orderBuyList from "../components/orderBuyList/index.vue";
import { reactive, ref } from "vue";
import { onShow, onLoad, onReachBottom } from "@dcloudio/uni-app";
import { apiOrderBuyList, apiOrderSellList, apiConfirmReceipt, apiIncomeApply, incomeConfirm, sendGoods,typesRefund } from "@/apis/order";
const asdPopup = ref(true);
const refundReason = ref("");
const shoppingId = ref("");
const refundSellId = ref("")
const tabFlag = ref("buy"); // buy 买入 sell 卖出
const sendType = ref(5);
const pageNum = ref(1);
const pageSize = ref(10);
const currentIndex = ref(0)
const tabslist = reactive([{
    id:5,
    name: '全部',
  }, {
    id:0,
    name: '待发货',
  }, {
    id:1,
    name: '待收货'
  }, {
    id:2,
    name: '已完成'
  }, {
    id:3,
    name: '退款中'
},{
    id:4,
    name: '已退款'
}])

let radiolist:any = ref([])
// 切换标签
// const chooseTab = (flag: string) => {
//   tabFlag.value = flag;
//   getOrderList();
// };
const modalConfirmReceipt=ref()
const modalRefundSell = ref()
const orderList:any = ref([]);
const has_more = ref(true)
const status = ref('loadmore')
const getOrderList = async () => {
  let params = {
    pageNum: pageNum.value, //页数
    pageSize: pageSize.value, //行数
    sendType:sendType.value
  };
  let res = tabFlag.value == "buy" ? await apiOrderBuyList(params) : await apiOrderSellList(params);
  // orderList.value = res.rows;
  let oldList = res.rows;
  orderList.value = [...orderList.value, ...oldList]
  has_more.value = orderList.value.length < res.total
};
const tabsListClick = async(item:any)=>{
  sendType.value = item.id
  orderList.value= []
  pageNum.value = 1
  pageSize.value = 10
  await getOrderList();
}
const restFn = async()=>{
  // sendType.value = 0
  orderList.value= []
  pageNum.value = 1
  pageSize.value = 10
  await getOrderList();
}
// const openPopup = () => {
//   asdPopup.value.open(true);
// };
const closePopup = () => {
  asdPopup.value.close();
};
const refundChild =(data:any)=>{
  shoppingId.value = data
  asdPopup.value.open(true);
}
const confirmReceiptChild =(data:any)=>{
  shoppingId.value = data
  // confirmReceipt()
  modalConfirmReceipt.value.open()
}
const cancelConfirmReceipt=()=>{
  modalConfirmReceipt.value.close()
}
const confirmConfirmReceipt=()=>{
  confirmReceipt()
}
const handleRefued = async () => {
  const data = {
    content: refundReason.value,
    shoppingId: shoppingId.value,
  };
  const res = await apiIncomeApply(data);
  if (res.code === 200) {
    // getOrderList();
    restFn();
    closePopup();
  }
  toast(res.msg);
};
const confirmReceipt = async()=>{
  const data = {
    id: shoppingId.value,
  };
  const res = await apiConfirmReceipt(data);
  if (res.code === 200) {
    // getOrderList();
    modalConfirmReceipt.value.close()
    restFn();
  }
  toast(res.msg);
}
const shipNowSell = async(data:any)=>{
  router(`/pagesOrder/order/deliver?id=${data.id}`);
  // const params = {
  //   shoppingId: data.id,
  //   expressDelivery: data.expressDelivery, //快递公司名称
  //   expressDeliveryId: data.expressDeliveryId, //快递公司id
  //   money: data.money, //运费
  //   oddNumbers: data.oddNumbers //快递单号
  // }
  // const res = await sendGoods(params);
  // if (res.code === 200) {
  //   getOrderList();
  // }
  // toast(res.msg);
}
const confirmRefundSell =()=>{
  refundSellFn()
}
const cancelRefundSell =()=>{
  modalRefundSell.value.close()
}
const refundSellFn = async()=>{
  const params = {
    shoppingId: refundSellId.value,
  };
  const res = await incomeConfirm(params);
  if (res.code === 200) {
    modalRefundSell.value.close()
    restFn()
  }
  toast(res.msg);
}
// 我卖的 -- 退款
const refundSell = async(data:any)=>{
  refundSellId.value = data
  modalRefundSell.value.open()
}

// 退款原因查询
const typesRefundFn = async () => {
  const res = await typesRefund();
  let arr:any = res.data
  let newArr:any = []
  arr.map((item:any)=>{
    newArr.push({
      deptName:item.deptName,
      disabled: false
    })
  })
  radiolist.value = newArr
};
onShow(() => {
  // getOrderList();
  restFn()
  typesRefundFn()
});

onLoad((options: any) => {
  currentIndex.value = Number(options.index)
  let sendTypeId = tabslist.filter((item,index)=>{
    if(currentIndex.value === index){
      return item
    }
  })
  sendType.value = sendTypeId[0].id
  tabFlag.value = options.scene || "buy"; // 默认买入
});
onReachBottom(() => {
  if (has_more.value) {
    status.value = 'loading';
    pageNum.value++;
    getOrderList()
  }
});
</script>
<template>
  <view>
    <uv-sticky bgColor="#fff">
      <uv-tabs :list="tabslist"
       :current="currentIndex"
       @click="tabsListClick" lineColor="#C33F29" 
        itemStyle="height: 84rpx;"
      >
      </uv-tabs>
    </uv-sticky>
    <view class="sell-wrap" v-if="tabFlag == 'sell'">
      <orderSellList :orderList="orderList" :scene="tabFlag" @shipNowSell="shipNowSell" @refundSell="refundSell"></orderSellList>
    </view>
    <view class="sell-wrap" v-if="tabFlag == 'buy'">
      <orderBuyList :orderList="orderList" :scene="tabFlag" @refundChild="refundChild" @confirmReceiptChild="confirmReceiptChild"></orderBuyList>
    </view>
    <!-- 加载更多 -->
    <view v-if="orderList.length" class="loadmores">
      <uv-load-more :status="has_more ? status : 'nomore'" />
    </view>
    <!-- <view style="" class="flex card flex-between card-padding">
      <view
        :class="
          ' flex flex-center tab flex-width-100 ' +
          (tabFlag == 'buy' ? 'tab-seleted' : ' ')
        "
        @click="chooseTab('buy')"
      >
        <text>我买的</text>
        <view class="line" v-if="tabFlag == 'buy'"> </view>
      </view>
      <uv-line length="50rpx" direction="col"></uv-line>
      <view
        :class="
          'flex tab flex-center flex-width-100 ' +
          (tabFlag == 'sell' ? 'tab-seleted' : ' ')
        "
        @click="chooseTab('sell')"
      >
        <text>我卖的</text>
        <view class="line" v-if="tabFlag == 'sell'"> </view>
      </view>
    </view> -->

    <!-- <view>
      <orderCard v-if="tabFlag == 'buy'" :lists="orderList" :scene="tabFlag" />
    </view> -->
    <!-- <view>
      <orderSellCard
        v-if="tabFlag == 'sell'"
        :lists="orderList"
        :scene="tabFlag"
      />
    </view> -->

    <!-- 暂无 -->
    <!-- <noneBox></noneBox> -->
    <uv-empty v-if="!orderList.length" mode="order" icon="https://cdn.uviewui.com/uview/empty/order.png"></uv-empty>
  </view>
  <uv-popup
    ref="asdPopup"
    mode="bottom"
    :closeable="false"
    zoom="true"
    round="10"
  >
    <view class="validate">
      <view class="btn-wrapp">
        <view class="btn-wrapp-left" @click="closePopup">取消</view>
        <view class="btn-wrapp-midd">退款原因</view>
        <view class="btn-wrapp-right" @click="handleRefued">确定</view>
      </view>
      <view class="textarea-wrapper">
        <!-- <uv-textarea
          class="textarea"
          v-model="refundReason"
          placeholder="请输入退款原因"
        ></uv-textarea> -->
        <view class="list-tk">
          <view>1、支付券不予返还:支付优惠一并取消</view>
          <view>2、订单一旦取消，无法恢复</view>
        </view>
        <view class="radio-title">请选择取消订单的原因(必选)：</view>
        <uv-radio-group v-model="refundReason" placement="column">
          <uv-radio
            activeColor="#C33F29"
            :customStyle="{margin: '8px'}" 
            v-for="(item, index) in radiolist" 
            :key="index" 
            :label="item.deptName" 
            :name="item.deptName">
          </uv-radio>
        </uv-radio-group>
      </view>
    </view>
  </uv-popup>
  <uv-modal ref="modalConfirmReceipt" title="确认收货" content='是否确认收货' showCancelButton @confirm="confirmConfirmReceipt" @cancel="cancelConfirmReceipt"></uv-modal>
  <uv-modal ref="modalRefundSell" title="确认退款" content='是否确认退款' showCancelButton @confirm="confirmRefundSell" @cancel="cancelRefundSell"></uv-modal>
</template>
<style scoped lang="scss">
.sell-wrap{
  padding: 20rpx;
}
.loadmores{
  padding-bottom: 30rpx;
}
.validate {
  height:auto;
  border-radius: 16px 16px 0px 0px;
  background-color: rgba(255, 255, 255, 1);
  .btn-wrapp {
    display: flex;
    height: 50px;
    border: 1rpx solid rgba(190, 190, 190, 1);
    .btn-wrapp-left {
      width: 60px;
      color: rgba(154, 154, 154, 1);
      font-size: 14px;
      text-align: center;
      line-height: 50px;
      font-family: PingFangSC-regular;
    }
    .btn-wrapp-midd {
      flex: 1;
      text-align: center;
      line-height: 50px;
      color: rgba(0, 0, 0, 1);
      font-size: 16px;
      text-align: center;
      font-family: PingFangSC-regular;
    }
    .btn-wrapp-right {
      width: 60px;
      color: #C33F29;
      font-size: 14px;
      text-align: center;
      line-height: 50px;
      font-family: PingFangSC-regular;
    }
  }
  .textarea-wrapper {
    margin-top: 20px;
    padding: 0 15px;
  }
  .list-tk{
    background: #ececec;
    padding: 20rpx;
  }
  .radio-title{
    font-weight: bold;
    font-size: 32rpx;
    margin: 40rpx 0 20rpx 0;
  }
}
</style>
